<template>
  <div class="noticeManagementWrap">
    <div class="serchInput">
      <div class="fuzzySearchWrap">
        <div class="text">
          <p>模糊查询</p>
        </div>
        <!-- <div class="input_wrap"> -->
        <el-input class="w-50 m-2" :suffix-icon="Search" />
        <!-- </div> -->
      </div>

      <div class="expirationDateWrap">
        <div class="text">
          <p>到期时间</p>
        </div>
        <div class="input_wrap">
          <el-date-picker
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            date-format="YYYY/MM/DD ddd"
            time-format="A hh:mm:ss"
          />
        </div>
      </div>

      <div class="statusWrap">
        <div class="text">
          <p>状态</p>
        </div>
        <div class="input_wrap">
          <el-select>
            <el-option value="1"></el-option>
          </el-select>
        </div>
      </div>

      <div class="categoryWrap">
        <div class="text">
          <p>类别</p>
        </div>
        <div class="input_wrap">
          <el-select>
            <el-option value="1"></el-option>
          </el-select>
        </div>
      </div>

      <div class="operationWrap">
        <div>
          <el-button :icon="Search" type="primary">查询</el-button>
        </div>

        <div>
          <el-button :icon="RefreshRight" color="white">重置</el-button>
        </div>
      </div>
    </div>
    <div class="title">
      <div class="allNotice">
        <p>全部通知(12)</p>
      </div>

      <el-button class="allRead" color="white">全部已读</el-button>
    </div>
    <div class="tableDta">
      <el-row>
        <el-col :span="24">
          <el-table :data="tableData" :row-height="90">
            <el-table-column type="index" label="序号" :min-width="minWidth('index')" />
            <el-table-column prop="title" label="标题" :min-width="minWidth('title')" />
            <el-table-column prop="content" label="内容" :min-width="minWidth('content')" />
            <el-table-column prop="type" label="类型" :min-width="minWidth('type')" />
            <el-table-column prop="source" label="来源" :min-width="minWidth('source')" />
            <el-table-column
              prop="publishTime"
              label="发布时间"
              :min-width="minWidth('publishTime')"
            />
            <el-table-column label="状态">
              <a class="no_read" href="javascript:void(0)">未读</a>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <a
                  style="text-align: center"
                  class="view_btn"
                  href="javascript:void(0)"
                  @click="viewInfo(scope.$index, scope.row)"
                >
                  查看
                </a>
                <a class="del_btn" href="javascript:void(0)">删除</a>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage1"
        :page-size="1"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, prev, pager, next"
        :total="1000000"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <DialogView ref="dialog" />
  </div>
</template>
<script setup lang="ts">
import { Search, RefreshRight } from "@element-plus/icons-vue";
import DialogView from "./components/DialogView.vue";
import { ref } from "vue";
//分页信息
const currentPage1 = ref(5);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
const dialog = ref<any>(null);
const viewInfo = (index: number, row: object) => {
  dialog.value.show(row);
};
//表格数据
const tableData = ref([
  {
    title: "【科技头条】AI 颠覆传统医疗：北京医院首次实现全自动化手术",
    content:
      "近日，北京协和医院联合华为研究院，成功运用 AI 辅助系统完成了一台肝癌切除手术。该系统通过实时分析医学影像，在术中为医生提供精准的肿瘤边界定位，手术时长较传统方式缩短40%。",
    type: "news",
    source: "新华社",
    publishTime: "2023-08-25 14:30:00",
  },
  {
    title: "《三体》动画版定档！腾讯视频独播，预告片播放量破亿",
    content:
      "改编自刘慈欣同名科幻小说的动画剧集《三体》将于9月1日登陆腾讯视频。首日预告片在微博、抖音等平台播放量突破1.2亿次，原著粉纷纷表示'特效还原度超预期'。",
    type: "entertainment",
    source: "腾讯视频",
    publishTime: "2023-08-20 17:00:00",
  },
  {
    title: "上海自贸区推出数字人民币跨境支付试点",
    content:
      "中国人民银行上海总部宣布，即日起在自贸区开展数字人民币跨境贸易结算试点。首批参与企业包括特斯拉上海超级工厂、汇丰银行(中国)等20家机构。",
    type: "finance",
    source: "第一财经",
    publishTime: "2023-08-22 09:45:00",
  },
  {
    title: "暑假爆款！小学生用乐高搭出核聚变反应堆模型获国家专利",
    content:
      "深圳12岁学生李明凭借自主设计的核聚变反应堆乐高模型，获得国家实用新型专利。该模型采用磁悬浮技术模拟托卡马克装置，被中科院专家评价'具有科普教育价值'。",
    type: "education",
    source: "央视新闻",
    publishTime: "2023-08-18 11:20:00",
  },
  {
    title: "iOS 17正式版上线：Siri接入ChatGPT模型，实测对话能力提升300%",
    content:
      "苹果公司在全球开发者大会上正式发布iOS 17系统，其中最受关注的是深度集成的ChatGPT模型。测试数据显示，新Siri在复杂问题处理、多轮对话等方面的表现远超旧版本。",
    type: "tech",
    source: "果壳网",
    publishTime: "2023-08-24 16:00:00",
  },
  {
    title: "杭州亚运会火炬手名单公布：全红婵、苏炳添等明星入选",
    content:
      "第19届杭州亚运会火炬手选拔结果正式揭晓，共有1000名火炬手参与传递。著名运动员全红婵、苏炳添以及电竞选手Uzi等均出现在最终名单中。",
    type: "sports",
    source: "网易体育",
    publishTime: "2023-08-26 08:15:00",
  },
  {
    title: "字节跳动推出首款AI绘画工具'妙笔生花'，开放API接口",
    content:
      "今日下午，字节跳动正式发布面向开发者的AI绘画平台'妙笔生花'。该工具支持文本到图像的实时生成，API响应时间低于800ms，已吸引超过5000家创作者入驻。",
    type: "startup",
    source: "36氪",
    publishTime: "2023-08-21 13:50:00",
  },
  {
    title: "气候危机加剧：北极圈今年首次出现32℃极端高温",
    content:
      "挪威气象研究所监测显示，当地时间8月23日，北极圈内某气象站录得32.5℃高温，打破1968年保持的30℃纪录。专家警告这可能导致永冻层加速融化。",
    type: "environment",
    source: "BBC中文网",
    publishTime: "2023-08-23 10:05:00",
  },
  {
    title: "周杰伦「最伟大的作品」MV首播5分钟破亿，中国风意象引热议",
    content:
      "周杰伦最新单曲《最伟大的作品》MV于8月25日零点上线，开播5分钟内全网播放量突破1亿次。MV中大量使用的敦煌壁画、青花瓷等中国风元素引发年轻群体强烈共鸣。",
    type: "music",
    source: "QQ音乐",
    publishTime: "2023-08-25 00:15:00",
  },
  {
    title: "特斯拉Cybertruck交付延期至2024年底，马斯克致歉称'生产地狱'",
    content:
      "特斯拉官方宣布，原定于2023年第四季度实现的Cybertruck量产目标推迟至2024年12月。马斯克在推特承认'制造难度远超预期'，工厂已启动24小时不间断生产。",
    type: "auto",
    source: "汽车之家",
    publishTime: "2023-08-27 15:30:00",
  },
]);
// 列宽自适应
const minWidth = (prop: string) => {
  const maxLen = tableData.value.reduce(
    (max, item: any) => Math.max(max, item[prop]?.length || 0),
    0
  );
  return `${Math.min(maxLen * 15, 300)}px`; // 字符数 * 15px，最大300px
};
</script>
<style lang="scss" scoped>
.allNotice {
  font-size: 16px;
}
.el-table_1_column_8 {
  text-align: center !important;
}
.el-button {
  border-radius: 2px;
}
:deep(.el-select__wrapper) {
  border-radius: 2px;
}
:deep(.el-input__wrapper) {
  border-radius: 2px !important;
}
:deep(.el-table thead th) {
  color: #3d3d3d;
  font-size: 14px;
  height: 56px;
}
.el-pagination {
  --el-pagination-bg-color: transparent;
}
.el-table {
  --el-table-bg-color: transparent !important;
  color: #3d3d3d !important;
}
:deep(.el-table tr) {
  background-color: transparent;
}
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
:deep(.cell) {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
:deep(.el-table .el-table__body td) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.example-basic .el-date-editor {
  margin: 8px;
}
:deep() .tableWrap {
  font-size: 14px;
  width: 100%;
  margin-top: 16px;
}
// .no_read{

// }
.view_btn {
  color: #3c80ff;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.del_btn {
  margin-left: 12px;
  color: #eb4d2a;
}
.allRead {
  border: 1px solid #3c80ff;
  border-radius: 2px;
  width: 88px;
  height: 32px;
  color: #3c80ff !important;
  font-size: 14px;
  background: transparent;
}
.serchInput {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: normal;
  border-bottom: 1px solid white;
  padding-bottom: 29.5px;
  color: #4e5969;
  > div {
    display: flex;
    flex: 1;
  }
  p {
    margin: 0;
    text-wrap: nowrap;
  }
}
.expirationDateWrap {
  flex: 2 !important;
}
.text {
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: 16px;
}
.input_wrap {
  flex: 2;
  display: flex;
  align-items: center;
}
.operationWrap {
  > div {
    flex: 1 !important;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
.noticeManagementWrap {
  height: calc(100% - 50px);
  margin: 25px;
  background: linear-gradient(180deg, #f0f5ff 0%, #fbfcfe 100%);
  box-shadow:
    inset 2px 1px 2px 1px #ffffff,
    0px 4px 8px 0px #eaf0ff;
  border-radius: 20px;
  padding: 30px 25px;
}
</style>
